<template>
  <div id="app">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <div class="header-container">
          <div class="logo">
            <div class="logo-icon-wrapper">
              <i class="el-icon-moon logo-icon"></i>
              <i class="el-icon-star-off logo-icon-star"></i>
            </div>
            <router-link to="/" class="logo-text">怪谭小说</router-link>
          </div>
          <div class="nav-menu">
            <el-menu mode="horizontal" router :default-active="activeRoute" background-color="#e8f7f7" text-color="#333" active-text-color="#ff6e00">
              <el-menu-item index="/">首页</el-menu-item>
              <el-menu-item index="/category">书库</el-menu-item>
              <el-menu-item index="/bookshelf">书架</el-menu-item>
              <el-menu-item index="/original">原创区</el-menu-item>
              <el-menu-item index="/writer">作家专区</el-menu-item>
              <el-menu-item index="/copyright">版权专区</el-menu-item>
            </el-menu>
          </div>
          <div class="search-box">
            <el-input placeholder="请输入书名或作者名" prefix-icon="el-icon-search"></el-input>
          </div>
          <div class="user-actions">
            <el-button type="text" @click="handleLogin">登录</el-button>
            <span class="divider">|</span>
            <el-button type="text">注册</el-button>
          </div>
        </div>
      </el-header>
      
      <!-- 主内容区 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
      
      <!-- 页脚 -->
      <el-footer>
        <div class="footer-content">
          <p>© 2025 怪谭小说网 版权所有</p>
          <p>
            <a href="#">关于我们</a> | 
            <a href="#">联系我们</a> | 
            <a href="#">用户协议</a> | 
            <a href="#">隐私政策</a>
          </p>
        </div>
      </el-footer>
    </el-container>
    
    <!-- 登录对话框 -->
    <el-dialog title="用户登录" :visible.sync="loginDialogVisible" width="400px">
      <el-form :model="loginForm">
        <el-form-item label="用户名" label-width="80px">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="loginForm.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitLogin">登录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      loginDialogVisible: false,
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  computed: {
    activeRoute() {
      return this.$route.path
    }
  },
  methods: {
    handleLogin() {
      this.loginDialogVisible = true
    },
    submitLogin() {
      // 模拟登录请求
      setTimeout(() => {
        this.loginDialogVisible = false
        this.$message.success('登录成功')
        this.$store.commit('setLoggedIn', true)
      }, 1000)
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  background-color: #f7f8fa;
}

#app {
  color: #2c3e50;
  width: 100%;
  overflow-x: hidden;
}

.el-header {
  background-color: #e8f7f7; /* 修改为浅蓝绿色背景，与图片一致 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  height: 60px !important;
  border-bottom: 1px solid #e0f0f0;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.logo-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon {
  font-size: 30px;
  color: #483d8b; /* 深紫色，更加神秘 */
  text-shadow: 0 0 8px rgba(72, 61, 139, 0.6); /* 增强发光效果 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.logo-icon-star {
  font-size: 12px;
  color: #ffd700; /* 金色 */
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); /* 增强发光效果 */
  position: absolute;
  top: 6px;
  left: 20px;
  transform: rotate(15deg);
  z-index: 2;
  animation: twinkle 2s infinite alternate; /* 添加闪烁动画 */
}

@keyframes twinkle {
  0% {
    opacity: 0.5;
    transform: rotate(15deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: rotate(15deg) scale(1.2);
  }
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #483d8b; /* 与图标颜色一致 */
  text-decoration: none;
  letter-spacing: 1px; /* 增加字间距 */
  text-shadow: 0 0 2px rgba(72, 61, 139, 0.3); /* 轻微发光效果 */
}

.nav-menu {
  flex: 1;
  margin: 0 20px;
}

.el-menu {
  border-bottom: none !important;
  background-color: transparent !important;
}

.el-menu--horizontal > .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  margin: 0 10px;
  padding: 0 10px;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ff6e00;
  color: #ff6e00;
  font-weight: bold;
}

.search-box {
  width: 300px;
  margin-right: 20px;
  position: relative;
}

.search-box .el-input__inner {
  border-radius: 20px;
  height: 36px;
  border: 1px solid #ddd;
  padding-left: 15px;
  font-size: 14px;
}

.search-box .el-input__prefix {
  left: 10px;
}

.user-actions {
  display: flex;
  align-items: center;
}

.user-actions .el-button {
  margin: 0 5px;
  color: #333;
  font-size: 14px;
  padding: 0;
}

.user-actions .el-button:hover {
  color: #ff6e00;
}

.divider {
  color: #ddd;
  margin: 0 5px;
}

.el-main {
  padding: 0;
  min-height: calc(100vh - 120px);
  width: 100%;
  margin-top: 60px; /* 为固定导航栏留出空间 */
  overflow-x: hidden;
}

/* 为了保持其他页面的布局，添加一个通用容器类 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.el-footer {
  background-color: #324057;
  color: #a4aebd;
  text-align: center;
  padding: 30px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content a {
  color: #a4aebd;
  text-decoration: none;
  margin: 0 5px;
}

.footer-content a:hover {
  color: #fff;
}

/* 确保导航栏在滚动时保持固定 */
.el-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 确保内容区域正确显示 */
.main-content {
  flex: 1;
  background-color: #fff;
}
</style>
